<template>
	<page-meta :page-style="'overflow:'+((eventCascaderShow||eventHandlerShow)?'hidden':'visible')"></page-meta>
	<view class="bg-white padding-tb padding-lr-lg min-height-100">
		<u--form labelPosition="left" errorType="border-bottom" :model="form" :rules="rules" :labelWidth="0" ref="uForm">
			<u-form-item :prop="formKeys.eventName" borderBottom>
				<view class="form-item-row padding-tb-sm">
					<view class="form-item-label">{{formKeysDesc[formKeys.eventName]}}</view>
					<view class="margin-left">
						<u--input v-model="form[formKeys.eventName]" border="none" :placeholder=" `请输入${formKeysDesc[formKeys.eventName]}`">
						</u--input>
					</view>
				</view>
			</u-form-item>
			<u-form-item :prop="formKeys.eventTypeId" borderBottom>
				<view class="form-item-row padding-tb-sm">
					<view class="form-item-label">{{formKeysDesc[formKeys.eventTypeId]}}</view>
					<view class="margin-left" @tap="meCheckEventCategory">
						<!-- form[formKeys.eventTypeId] meCheckPath -->
						<u--input v-model="meCheckPath" :disabled="true" :customStyle="inputDisabledCustomStyle" border="none" :placeholder="`请选择${formKeysDesc[formKeys.eventTypeId]}`">
						</u--input>
					</view>
				</view>
			</u-form-item>
			<u-form-item :prop="formKeys.eventPeopleNum" borderBottom>
				<view class="form-item-row padding-tb-sm">
					<view class="form-item-label">{{formKeysDesc[formKeys.eventPeopleNum]}}</view>
					<view class="margin-left">
						<u--input v-model="form[formKeys.eventPeopleNum]" type="number" border="none" :placeholder=" `请输入${formKeysDesc[formKeys.eventPeopleNum]}`">
						</u--input>
					</view>
				</view>
			</u-form-item>
			<u-form-item :prop="formKeys.eventDescribe" borderBottom>
				<view class="flex align-start width-p-100 padding-tb-sm">
					<view class="form-item-label">{{formKeysDesc[formKeys.eventDescribe]}}</view>
					<view class="margin-left-60 width-p-100">
						<u--textarea width="100%" :height="70" :autoHeight="true" v-model="form[formKeys.eventDescribe]" border="none" :placeholder="`请输入${formKeysDesc[formKeys.eventDescribe]}`">
						</u--textarea>
					</view>
				</view>
			</u-form-item>
			<u-form-item :prop="formKeys.imgIds" borderBottom>
				<view class="width-p-100 padding-tb-sm">
					<view class="text-nowarp">
						<text class="text-bold">{{formKeysDesc[formKeys.imgIds]}}</text>
						<text class="margin-left text-sm text-gray">(最多可上传9张图片)</text>
					</view>
					<view class="margin-top width-p-100">
						<u-upload :fileList="mu_fileList" :previewFullImage="true" :deletable="true" @afterRead="muAfterRead" @delete="muDeletePic" name="eventImages" multiple :width="200"
							:height="200" :maxCount="9">
							<view class="upload-custom">
								<view>
									<view class="flex justify-center">
										<u-icon name="plus" color="#aaa" :size="40"></u-icon>
									</view>
									<view class="margin-top-sm text-center">上传图片</view>
								</view>
							</view>
						</u-upload>
					</view>
				</view>
			</u-form-item>
			<u-form-item :prop="formKeys.eventLevel" borderBottom>
				<view class="form-item-row padding-tb-sm">
					<view class="form-item-label">{{formKeysDesc[formKeys.eventLevel]}}</view>
					<view class="margin-left">
						<picker mode="selector" :range="mel_levelList" range-key="label" :value="mel_defaultIndex" @change="melLevelConfirm">
							<view>{{ mel_levelList[mel_defaultIndex].label }}</view>
						</picker>
					</view>
				</view>
			</u-form-item>
			<u-form-item :prop="formKeys.eventLocation" borderBottom>
				<view class="padding-tb-sm">
					<view class="form-item-row">
						<view class="form-item-label">{{formKeysDesc[formKeys.eventLocation]}}</view>
						<view class="margin-left" @tap="mlChooseLocation">
							<u--input v-model="form[formKeys.eventLocation]" type="number" :disabled="true" :customStyle="inputDisabledCustomStyle" border="none"
								:placeholder="`请输入${formKeysDesc[formKeys.eventLocation]}`">
							</u--input>
						</view>
					</view>
					<view class="margin-top">
						<map style="width: 100%;" :latitude="form[formKeys.lat]" :longitude="form[formKeys.lon]" :markers="ml_markers" :show-location="false" @tap="mlCheckMap"></map>
					</view>
				</view>
			</u-form-item>
			<u-form-item :prop="formKeys.eventHandler" borderBottom>
				<view class="padding-tb-sm">
					<view class="form-item-label">{{formKeysDesc[formKeys.eventHandler]}}</view>
					<view class="margin-top" @tap="mhCheckHandler">
						<!-- form[formKeys.eventHandler] mhCheckPath -->
						<u--input v-model="mhCheckPath" :disabled="true" :customStyle="inputDisabledCustomStyle" border="none" :placeholder=" `请选择${formKeysDesc[formKeys.eventHandler]}`">
						</u--input>
					</view>
				</view>
			</u-form-item>
			<u-form-item :prop="formKeys.createBy" borderBottom>
				<view class="form-item-row padding-tb-sm">
					<view class="form-item-label">{{formKeysDesc[formKeys.createBy]}}</view>
					<view class="margin-left">
						<u--input v-model="form[formKeys.createBy]" :disabled="true" :customStyle="inputDisabledCustomStyle" border="none" :placeholder=" `请选择${formKeysDesc[formKeys.createBy]}`">
						</u--input>
					</view>
				</view>
			</u-form-item>
		</u--form>
		<!--demo-->
		<!-- <view class="padding-tb-sm">
			<view class="form-item-label">树结构级联</view>
			<view class="margin-top" @tap="demoShow=true">
				<u--input v-model="treePath" :disabled="true" :customStyle="inputDisabledCustomStyle" border="none" :placeholder=" `请选择树`">
				</u--input>
			</view>
		</view> -->
		<view class="other-row padding-tb-lg">
			<view class="form-item-label">性别</view>
			<view class="margin-left">
				<u--input :value="SexEnum[userInfo.sex]" :disabled="true" :customStyle="inputDisabledCustomStyle" border="none" :placeholder=" `请选择性别`">
				</u--input>
			</view>
		</view>
		<view class="other-row padding-tb-lg">
			<view class="form-item-label">手机号</view>
			<view class="margin-left">
				<u--input :value="userInfo.phonenumber" :disabled="true" :customStyle="inputDisabledCustomStyle" border="none" :placeholder=" `请输入手机号`">
				</u--input>
			</view>
		</view>
		<view class="other-row padding-tb-lg">
			<view class="form-item-label">身份证号</view>
			<view class="margin-left">
				<u--input :value="userInfo.userNumberId" :disabled="true" :customStyle="inputDisabledCustomStyle" border="none" :placeholder=" `请输入身份证号`">
				</u--input>
			</view>
		</view>
		<view class="common-btn default-btn margin-top-xxl" @tap="sub">提交</view>
		<!--事件类型-->
		<WakinCascader ref="RefCascader" workType="classify" :show.sync="eventCascaderShow" title="选择事件类型" @check="meCheckEventConfirm" @choose="meChooseConfirm"></WakinCascader>
		<!--下一节点处理人-->
		<WakinCascader ref="RefHandleCascader" workType="handler" :show.sync="eventHandlerShow" title="选择处理人" @check="mhCheckEventConfirm" @choose="mhChooseConfirm">
		</WakinCascader>
		<WakinCascader ref="ReDemoCascader" :load-type="LoadEnum.tree" :tree-datas="demoTree" label-key="text" value-key="value" children-key="children" :show.sync="demoShow" title="选择树节点"
			@check="demoTreeConfirm" @choose="demoTreeChooseConfirm">
		</WakinCascader>
	</view>
</template>

<script>
	import {
		formKeys,
		formKeysDesc,
		form as FormConfig,
		rules
	} from "./report.form.config"
	import {
		SexEnum
	} from "@/enums/common"
	import mixUpload from "./mixins/mixinsUpload"
	import mixEventCategory from "./mixins/mixinsEventCategory"
	import mixHandler from "./mixins/mixinsHandler"
	import mixEventLevle from "./mixins/mixinsEventLevel"
	import mixLocation from "./mixins/mixinsLocation"
	import mixDemoTree from "./mixins/mixinsDemoTree"
	import {
		subEvent
	} from "@/api/Interface/event"
	import {
		mapState
	} from "vuex"
	import {
		LoadEnum
	} from "@/components/wakin-cascader/config"
	import WakinCascader from "@/components/wakin-cascader/wakin-cascader.vue"
	import WakinCascaderItemBtns from "@/components/wakin-cascader/wakin-cascader-item-btns.vue"
	import {
		useAmapGetRegeo
	} from "../../../hooks/useLocation"
	export default {
		mixins: [mixUpload, mixEventCategory, mixHandler, mixEventLevle, mixLocation, mixDemoTree],
		data() {
			return {
				formKeys,
				formKeysDesc,
				form: JSON.parse(JSON.stringify(FormConfig)),
				rules,
				SexEnum,
				LoadEnum,
				inputDisabledCustomStyle: {
					"background-color": "#ffffff",
					width: "100%"
				}
			}
		},
		components: {
			WakinCascader,
			WakinCascaderItemBtns
		},
		computed: {
			...mapState("user", {
				userInfo: state => state.userInfo
			})
		},
		onLoad() {
			this.form[formKeys.createBy] = this.userInfo.nickName
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			sub() {
				console.log('this.form', JSON.parse(JSON.stringify(this.form)));
				let me = this;
				this.$refs.uForm.validate().then(validateRes => {
					console.log("校验通过", validateRes);
					if (validateRes) {
						uni.showModal({
							title: "确认提交?",
							async success(modalRes) {
								if (modalRes.confirm) {
									me.form[formKeys.imgIds] = me.mu_fileList.length > 0 ? me.mu_fileList.map(m => m.file) : [];
									me.formatLocation();
									console.log('确认提交me.form', JSON.parse(JSON.stringify(me.form)));
									await subEvent(me.form).then(res => {
										me.$toast(res.msg)
										if (res.code === 200) {
											setTimeout(() => {
												uni.switchTab({
													url: "/pages/index/index"
												})
											}, 1500)
										}
									})
								}
							}
						})
					}
				}).catch(errors => {
					me.$toast(errors?.[0]?.message ?? "有必填项未填写,请注意红色下划线位置")
					console.log("校验不通过", errors);
				})
			},
			async formatLocation() {
				try {
					const datas = await useAmapGetRegeo(this.form[formKeys.lon] + "," + this.form[formKeys.lat])
					const {
						latitude,
						longitude,
					} = datas[0]
					this.form[formKeys.lat] = latitude;
					this.form[formKeys.lon] = longitude;

				} catch (e) {
					//TODO handle the exception
				}
			},
		},
		onUnload() {
			this.form = FormConfig;
			// console.log("销毁report", FormConfig, this.form);
		}
	}
</script>

<style lang="less" scoped>
	.form-item-row {
		display: flex;
		align-items: center;
	}

	.form-item-label {
		width: 140rpx;
		font-weight: bold;
		white-space: nowrap;
	}

	.other-row {
		display: flex;
		align-items: center;
	}

	.other-row:not(:last-child) {

		border-bottom: 1px solid rgba(214, 215, 217, 0.5);
		// transform: scaleY(0.5);
		// border-color: #d6d7d9;
	}

	.margin-left-60 {
		margin-left: 60rpx;
	}

	.upload-custom {
		border-radius: 15rpx;
		border: 1px dashed #aaaaaa;
		// padding: 30rpx;
		color: #aaaaaa;
		width: 200rpx;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}



	/deep/ .u-textarea {
		padding: 0 !important;
	}

	.popup-level {
		height: 50vh;

		/deep/ .u-slide-up-enter-to {
			// height: 50vh;
		}
	}

	// /deep/ .u-icon__icon {
	// 	font-size: 36rpx !important;
	// }
</style>

<style lang="scss" scoped>
	.next-btns {
		display: flex;
		align-items: center;

		.btn {
			width: max-content;
			background-color: var(--main-color);
			color: #ffffff;
			border-radius: 20rpx;
			padding: 5rpx 16rpx;
			font-size: 24rpx;
		}
	}
</style>